<template>
  <view class="couponList-box">
    <view class="couponList-tips">*使用规则：到店跟工作人员出示该会员卡，指示出使用那张礼劵给工人核销即可。</view>
    <!-- 券列表 -->
    <view class="couponList">
      <view class="couponList__top">
        <view class="couponList__top__id">卡号： {{ couponInfo.number }}</view>
      </view>
      <view class="couponList__main">
        <view class="couponList__main__left">
          <view class="couponList__main__left__text">
            姓名：{{ couponInfo.username }}
          </view>
          <view class="couponList__main__left__text">
            手机号：{{ couponInfo.phone }}
          </view>
        </view>
        <view class="couponList__main__right">
          <image style="width:100rpx;" mode="widthFix" src="@/Shop/static/icon_klm_coupon.png"></image>
        </view>
      </view>
      <view class="couponList__bottom">
        服务门店： {{ couponInfo.companyName }}
      </view>
    </view>
    <view class="couponList__title">关联车辆</view>
    <view class="couponList-cars">
      <view class="couponList-cars__box">
        <view class="couponList-cars__box__row">
          <view class="couponList-cars__box__row__text red">车牌号码</view>
          <view class="couponList-cars__box__row__text red">底盘号</view>
        </view>
        <view class="couponList-cars__box__row" v-for="itemCar in couponInfo.cars" :key="itemCar.id">
          <view class="couponList-cars__box__row__text">{{ itemCar.licensePlate }}</view>
          <view class="couponList-cars__box__row__text">{{ itemCar.chassisNumber }}</view>
        </view>
      </view>
    </view>
    <!-- 券列表 -->
    <view class="couponList__title">卡劵 ({{ couponInfo.couponRelations.length }})</view>
    <view class="couponList-itme" v-for="item in couponInfo.couponRelations" :key="item.id">
      <view class="couponList-itme__left">
        <view class="couponList-itme__left__name">{{ item.couponName }} </view>
        <!-- <view class="couponList-itme__left__company">
          {{ couponInfo.companyName }}</view> -->
      </view>
      <view class="couponList-itme__righ">
        <view class="couponList-itme__righ__text"> x1 </view>
      </view>
      <view class="couponList-itme__top"></view>
      <view class="couponList-itme__bottom"></view>
    </view>
    <view class="couponList__tips" v-if="couponInfo.couponRelations.length === 0">暂无礼劵</view>
  </view>
</template>
<script>
import { mapState } from 'vuex'
import { couponByPhoneApi } from '@/API/Shop'
export default {
  name: 'CouponDetail',
  data() {
    return {
      currIndex: 0,
      // 优惠券列表
      couponByPhone: [],
      // 锦讯公司列表
      // companyList: [],
      couponInfo: {},
    }
  },
  computed: {
    ...mapState(['centersList']),
  },
  methods: {
    // 优惠券列表
    async getCouponByPhone() {
      const {
        data: { data, code },
      } = await couponByPhoneApi({
        phone: '15920303048',
      })
      this.couponByPhone = data
      console.log('data', data)
    },
    // 详情页
    goCouponDetail(e) {
      if (!e || !e.length) {
        return uni.$showMsg('该卡没有券，请先购买！')
      }
      console.log(e)
    },
  },
  watch: {},
  // 页面周期函数--监听页面加载
  onLoad(options) {
    this.couponInfo = JSON.parse(decodeURIComponent(options.info))
    console.log('options', this.couponInfo)
    // 获取优惠券列表
    // this.getCouponByPhone()
    this.shareMixin.title = `卡券详情`
    this.shareMixin.path = `/pages/Shop/ShopAdmin`
  },
}
</script>

<style scoped lang="scss">
.couponList-box {
  padding-bottom: 40rpx;
  min-height: 100%;
  background-color: #f7f7f7;
}

.couponList-tips {
  padding: 30rpx 30rpx 20rpx;
  font-size: 26rpx;
  font-weight: 600;
  color: $theme-color;

}

.couponList {
  margin: 20rpx 30rpx 30rpx;
  padding: 30rpx;
  border: 1px solid #eee;
  border-radius: 20rpx;
  color: #222;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0px 3px 6px 0px rgba(25, 3, 3, 0.1);
  overflow: hidden;
  position: relative;
  z-index: 1;

  &__top {
    padding-bottom: 20rpx;
    display: flex;
    color: #111;
    justify-content: space-between;
    align-content: center;
    width: 100%;
    font-weight: 600;

    &__name {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 50%;
      font-size: 24rpx;
      color: $theme-color;

      i {
        display: inline-block;
        font-size: 26rpx;
        color: #222;
      }
    }

    &__id {
      font-size: 32rpx;
      font-weight: 600;
      font-family: 'Audi-type', 'Microsoft JhengHei' !important;
      // color: $theme-color;
    }

    &__num {
      font-family: 'Audi-type', 'Microsoft JhengHei' !important;
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
      background: $theme-color;
      position: absolute;
      top: -90rpx;
      right: -90rpx;
      z-index: 2;

      span {
        font-size: 34rpx;
        color: #fff;
        position: absolute;
        width: 110rpx;
        height: 110rpx;
        line-height: 90rpx;
        text-align: center;
        bottom: 0;
        left: 8rpx;

        i {
          font-size: 24rpx;
          display: inline-block;
        }
      }
    }
  }

  &__main {
    padding: 10rpx 0;
    margin-bottom: 10rpx;
    display: flex;
    justify-content: space-between;
    min-height: 120rpx;

    &__left {
      flex: 1;

      &__text {
        font-weight: 600;
        font-size: 28rpx;
        line-height: 60rpx;
        position: relative;
        margin-left: 20px;
        color: #151515;
      }

      &__text::before {
        content: '';
        display: block;
        width: 5px;
        height: 5px;
        background: #151515;
        border-radius: 50%;
        margin-right: 6px;
        position: absolute;
        left: -24rpx;
        top: 26rpx;
      }
    }

    &__right {
      width: 200rpx;
      display: flex;
      justify-content: center;
      // justify-content: space-between;
      align-items: center;
    }
  }

  &__bottom {
    padding-top: 20rpx;
    border-top: #eee solid 1px;
    font-size: 24rpx;
  }
}

// 优惠券
.couponList-itme {
  position: relative;
  height: 160rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 20rpx;
  margin: 16rpx 30rpx 30rpx;
  border: 1px dashed #ffa5a5;
  border-radius: 14rpx;
  overflow: hidden;
  background-color: #fffbfb;

  &__righ {
    width: 130rpx;
    height: 100%;
    // line-height: 160rpx;
    text-align: center;
    border-left: 1px dashed #ffa5a5;
    border-radius: 14rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    &__text {
      // border: 1px solid $theme-color;
      padding: 0 10rpx;
      height: 42rpx;
      line-height: 42rpx;
      font-size: 40rpx;
      font-weight: 600;
      color: $theme-color;
      border-radius: 20rpx;
    }
  }

  &__left {
    padding: 0 0rpx 0rpx 30rpx;
    height: 100%;
    // background-color: $theme-color;
    // border: 1px dashed #ffa5a5;
    border-radius: 14rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;

    // align-content: center;
    &__name {
      font-size: 32rpx;
      font-weight: bold;
      // color: #fafafa;
      color: $theme-color;
    }

    &__company {
      font-size: 26rpx;
      line-height: 58rpx;
      // color: #fafafa;
    }
  }

  &__top,
  &__bottom {
    position: absolute;
    background-color: #f6f6f6;
    width: 26rpx;
    height: 26rpx;
    z-index: 99;
    border: 1px dashed #ffa5a5;
    border-radius: 50%;
    right: 118rpx;

  }

  &__top {
    top: -8px;
  }

  &__bottom {
    bottom: -15rpx;
  }
}

// 关联车辆
.couponList__title {
  margin: 40rpx 30rpx 0;
  font-size: 36rpx;
  font-weight: 600;
  color: #222;
}

.couponList__tips {
  margin-top: 20rpx;
  width: 100%;
  text-align: center;
}

.couponList-cars {
  margin: 0 30rpx 30rpx;

  &__box {
    margin-top: 16rpx;
    padding: 20rpx 10rpx;
    background: #fff;
    box-shadow: 0 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
    border-radius: 14rpx;

    &__row {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 100%;

      &__text {
        padding: 6rpx 0;
        width: 40%;
        font-family: 'Audi-type', 'Microsoft JhengHei' !important;
        font-size: 32rpx;
        color: #333;

        &.red {
          font-size: 26rpx;
          color: $theme-color;
        }

        &:nth-last-child(1) {
          width: 60%;
        }
      }
    }
  }
}</style>
